<template>
	<view class="search-input">
		<div class="searchs1">
			<input type="text" class="searchs" @tap="handleToSearch"  placeholder="搜索订单"/>
			<div class="teb1">
					<view class="head-nav">
<!-- 0:未支付 1:已支付，待配送 2:已配送 3:已送达 4:商家拒绝接单 5:已签收 6:已拒收  （初始状态为0：未支付） 7:已退款 8:退款失败 9:客户申请退款（待商家同意退款） -->
						<view :class="navIndex==0?'activite':''" @click="checkIndex(0,'')">全部</view>
						<view :class="navIndex==1?'activite':''" @click="checkIndex(1,0)">待支付</view>
						<view :class="navIndex==2?'activite':''" @click="checkIndex(2,4)">已拒绝</view>
						<view :class="navIndex==3?'activite':''" @click="checkIndex(3,7)">已退款</view>
						<view :class="navIndex==4?'activite':''" @click="checkIndex(4,8)">拒绝退款</view>
					</view>
			</div>
		</div>
		<!-- 列表 -->
		<view class="content">
			<view v-for="i in queryAllOrder" style="display: flex;border-bottom: 1px solid #E4E4E4; padding-bottom: 10rpx;">
				<view class="">
					<img :src=i.orderProducts[0].dtPic1 alt="" class="imgs">
				</view>
				<view class="">
					<view class="size1">{{i.orderProducts[0].productName}}</view>
					<view class="size">{{i.receiverAddress}}</view>
					<view class="size2">
						{{i.status==0?'待支付':i.status==1?'待配送':i.status==2?'配送中':i.status==3?'已送达':i.status==4?'商家已拒绝':i.status==5?'已签收':
							i.status==6?'客户拒收':i.status==7?'已退款':i.status==8?'退款失败':i.status==9?'待退款':''}}
					</view>
					<view style="font-size: 26rpx;">
						<span style="color: #000;margin-right: 175rpx;">共:{{i.productCount}}件 ￥{{i.orderProducts[0].unitPrice}}</span>
						合计：<span style="font-weight: 600;font-size: 29rpx;color: #e25011;"> {{i.amount}}元</span>
					</view>
					<view class="btnbox">
						<p class="btn" v-if="i.status==1"><span class="ps psty" @click="delivery(i,2)">配送</span><span class="ps psjj" @click="delivery(i,4)">拒绝</span></p>
						<p class="btn" v-if="i.status==2"><span class="ps psty" @click="delivery(i,3)">送达</span></p>
						<p class="btn" v-if="i.status==9"><span class="ps psty" @click="delivery(i,7)">同意</span><span class="ps psjj" @click="delivery(i,8)">拒绝</span></p>
						<p class="btn"><span class="ps psxl" @click="tocall(i.receiverMobile)">联系客户</span></p>
					</view>
					<view class="bz" v-if="i.remark&&i.remark!=''">备注：{{i.remark}}</view>
				</view>
			</view>
		</view>
		<view class="salesbox" v-if="afterSalesbox>1">
			<view class="sales">
				<view class="salestext" v-if="afterSalesbox==2">是否同意退款请求？</view>
				<view class="salestext" v-if="afterSalesbox==3">是否拒绝退款请求？</view>
				<view class="salesbtn">
					<text @click="delivery2()" style="border-right: 1px solid #999;color: #007AFF;">是</text>
					<text @click="afterSalesbox=false">否</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import TabBar from '@/pages/common/components/TabBar.vue'
	import { mapState } from 'vuex';
	import { getProductAll } from '@/api/index.js'
	import { queryOrdersByPrarmSt,queryAllOrders } from '@/api/new.js'
	import { updateOrder } from '@/api/new1.js'
	import { log } from 'util'
	export default {
		name: 'Input',
		data () {
			return {
				navIndex: 0,
				queryAllOrder:[],
				updateOrder:[],
				afterSalesbox:1,
				dataobj:{
					item:{},
					statu:'',
				}
			}
		},
		mounted () {
			this.checkIndex(0,'')
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		methods: {
			checkIndex(index,status) {
				this.navIndex = index;
				var data = {
					storeId: this.userInfo.storeId,
					status:status
				}
				queryOrdersByPrarmSt(data).then(res => {
					this.queryAllOrder = res.data.data
				})
			},
			delivery2(){
				this.afterSalesbox = 1
				if(this.dataobj.statu == 7){
					var data = {
						orderId: this.dataobj.item.orderId
					}
					refundOrder(data).then(res => {
						this.checkIndex(this.navIndex,statu)
						uni.showToast({
							title: '操作成功,已同意退款申请',
							icon:"none"
						})
					})
				}else if(this.dataobj.statu == 8){
					this.dataobj.item = item
					this.dataobj.statu = statu
					let data = this.dataobj.item
					data.status = this.dataobj.statu
					updateOrder(data).then(res => {
						this.checkIndex(this.navIndex,this.dataobj.statu)
						uni.showToast({
							title: '操作成功',
							icon:'none'
						});
					})
				}
			},
			delivery(item,statu,val){
				if(statu == 7){
					this.dataobj.item = item
					this.dataobj.statu = statu
					this.afterSalesbox = val
				}else if(statu == 8){
					this.dataobj.item = item
					this.dataobj.statu = statu
					this.afterSalesbox = val
				}else{
					let data = item
					data.status = statu
					updateOrder(data).then(res => {
						this.checkIndex(this.navIndex,statu)
						uni.showToast({
							title: '操作成功',
							icon:'none'
						});
					})
				}
			},
			tocall(data){
				this.afterSalesbox = false
				 uni.makePhoneCall({
					phoneNumber:data,//电话号码
					success:function(e){
						console.log(e);
					},
					fail:function(e){
						console.log(e);
								 
					}
				})
			},
			handleToSearch () {
				uni.navigateTo({
				    url: '/pages/search/search'
				});
				
			},
			delivery(item,statu){
				if(statu == 7){
					var data = {
						orderId: item.orderId
					}
					refundOrder(data).then(res => {
						this.checkIndex(this.navIndex,statu)
						uni.showToast({
							title: '操作成功,已同意退款申请',
							icon:"none"
						})
					})
				}else{
					let data = item
					data.status = statu
					updateOrder(data).then(res => {
						this.checkIndex(this.navIndex,statu)
						uni.showToast({
							title: '操作成功',
							icon:'none'
						});
					})
				}
			},
		},
		components: {
			TabBar
		}
	}
</script>
<style scoped>
	
	.search-input {
		font-size: 28rpx;
	}
	.searchs1{
		position: fixed;
		top: 0;
		width: 100%;
		height: 220rpx;
		background: #5c7de8;
	}
	.searchs {
		width: 80%;
		border: 1rpx solid #aaa;
		border-radius: 8rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 15rpx 8rpx;
		padding: 0 20rpx;
		background: #fff;
		border-radius:50rpx;
		margin-left: 54rpx;
		position: absolute;
		top: 40rpx;
	}
	.head-nav {
		min-width: 700rpx;
		margin-top: 20rpx;
		margin-left: -20rpx;
		display: flex;
		color: #e6e6e6;
	}
	.head-nav>view{
		margin-right: 20rpx;
		font-size: 30rpx;
	}
	.activite {
		color: #fff;
		font-size: 32rpx !important;
		padding-bottom: 5rpx;
		border-bottom: 2rpx solid #fff;
	}
	.content {
		height: 100%;
		margin-top: 230rpx;
	}
	.teb1{
		margin-right: 48%;
		padding-top: 17%;
		padding-left: 8%;
		color: #fff;
	}
	.content img{
		width: 180rpx;
		height: 180rpx;
		margin-left: 28rpx;
	}
	.imgs{
		margin-top: 30rpx;
		margin-right: 30rpx;
	}
	.size{
		color: #a5a5a5;
		font-size: 24rpx;
		width:50%;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.size1{
		width:65%;
		color: #000;
		font-weight: 600;
		font-size: 26rpx;
		margin: 20rpx 0 8rpx 0;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
	.bz{
		color: #000;
		width: 67%;
	}
	.size2{
		margin: 10rpx 0 10rpx 364rpx;
		color: #373ed1;
		word-wrap: break-word;
		word-break: break-all;
	}
	.dizhi{
		font-weight: bold;
		width: 178rpx;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
	.dizhi1{
		width: 90rpx;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow:ellipsis;
	}
	.btnbox{
		display: flex;
		margin: 14rpx 0;
	}
	.ps{
		display: inline-block;
		text-align: center;
		border-radius: 12rpx;
		padding: 2rpx 10rpx;
		margin-right: 20rpx;
	}
	.psty{
		background: #b5e1a8;
		color: #347110;
	}
	.psjj{
		background: #ffbbbb;
		color: #e23639;
	}
	.psxl{
		background: bisque;
		color: #caa201;
	}
	.psgeo{
		background: #5c7de8;
		color: #fff;
	}
	.salesbox{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0, .3)
	}
	.sales{
		position: fixed;
		top: 30%;
		left: 20%;
		padding-top: 50rpx;
		width: 460rpx;
		height: 260rpx;
		background: #fff;
		border-radius: 30rpx;
		border: 1rpx solid #cfcfcf;
		box-shadow:#acacac 0px 0px 10rpx;
	}
	.salestext{
		margin: 0 30rpx;
	}
	.salesbtn{
		display: flex;
		position: absolute;
		bottom: 0;
	}
	.salesbtn text{
		display: inline-block;
		width: 230rpx ;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		color: #333;
		text-align: center;
		border-top: 1px solid #999;
		
	}
</style>